<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

  <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 16px; /* 设置默认字体大小 */
            line-height: 1.6; /* 设置默认行高 */
        }
        #orderListContainer {
            width: 90%; /* 增加表格宽度 */
            margin: 20px auto;
            text-align: center;
        }
        #orderListTitle {
            background-color: #4CAF50;
            color: white;
            padding: 15px; /* 增加标题的内边距 */
            margin-bottom: 30px; /* 增加标题和表格之间的间距 */
            border-radius: 8px;
            font-size: 24px; /* 增加标题的字体大小 */
        }
        #orderTable {
            width: 100%;
            border-collapse: collapse;
            margin: auto;
            font-size: 18px; /* 增加表格内容的字体大小 */
        }
        #orderTable th, #orderTable td {
            border: 2px solid #ddd; /* 增加表格边框粗细 */
            padding: 15px; /* 增加单元格内边距 */
        }
        #orderTable th {
            background-color: #f2f2f2;
        }
        .editButton {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px; /* 增加按钮的内边距 */
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px; /* 增加按钮的字体大小 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .editButton:hover {
            background-color: #45a049; /* 悬停时的背景色 */
        }
        
      
       
		/* 弹框样式 */
		 #editModal{
		    display: none;
		    position: fixed;
		    z-index: 1000;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%, -50%);
		    width: 500px;
		    height: 500px;
		    background-color: #fff;
		    border: 1px solid #ccc;
		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		}
		.modal-content .close{
		font-size:28px;
		margin-left:460px;
		cursor: pointer; /* 设置鼠标指针为小手 */
		}
		.modal-content h2{
		text-align:center;
		
		}
          #editForm {
            margin-top: 20px;
            text-align: left;
        }
        #editForm input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0 15px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 20px;
        }
        label{
        font-size:23px;
        padding-left:10px;
        }
        #editForm .editSubmit {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 20px;
            margin-top: 10px;
            text-align:center;
            display: block;
            margin:auto;
        }
        #editForm .editSubmit:hover {
            background-color: #45a049;
        }
    </style>


</head>
<div id="orderListContainer">
    <h2 id="orderListTitle">订单列表</h2>
    <table id="orderTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>电话</th>
                <th>地址</th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 用户数据将动态生成并插入到这里 -->
        </tbody>
    </table>
</div>




</body>

<script>


$(document).ready(function() {
    // 页面加载完成后立即加载用户数据
    reloadorderData();

    
});

// 加载订单数据
function reloadorderData() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/zhengshidazuoye/order',
        dataType: 'json',
        success: function(res) {
        
            renderorderTable(res); // 渲染用户表格
        },
        error: function() {
            alert('Error fetching data.');
        }
    });
}


// 渲染订单表格
function renderorderTable(orders) {
    var orderTableBody = $('#orderTable tbody');
    orderTableBody.empty(); // 清空现有内容

    $.each(orders, function(index, order) {
        var row = $('<tr></tr>');
        row.append('<td>' + order.id + '</td>');
        row.append('<td>' + order.name + '</td>');
        row.append('<td>' + order.phone + '</td>');
        row.append('<td>' + order.address + '</td>');
        row.append('<td>' + order.productname + '</td>');
        row.append('<td>' + order.price + '</td>');
        row.append('<td>' + order.quantity + '</td>');
        row.append('<td>' + order.totalPrice + '</td>');
        var editButton = $('<button class="editButton">派送</button>'); // 编辑按钮
        editButton.data('orderId', order.id); // 绑定订单ID到按钮上
        row.append($('<td></td>').append(editButton));
        orderTableBody.append(row);
    });
}

$(document).on('click', '.editButton', function() {
    var orderId = $(this).data('orderId'); // 从按钮上获取订单ID
    if (confirm('确定要派送吗？')) {
        // 发送删除请求
        deleteOrder(orderId);

    }
});



function deleteOrder(orderId) {
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/zhengshidazuoye/order',
        data: { orderId: orderId }, // 将订单ID作为表单参数发送
        success: function(res) {
            // 成功删除后的处理
            reloadorderData(); // 重新加载订单数据
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error deleting order:', textStatus, errorThrown);
            alert('Error deleting order.');
        }
    });
}





</script>
</html>